<template>
  <view class="numberPad-wrapper">
    <view class="money">{{output}}</view>
    <view class="section">
      <view class="button" @click="getButton('1')">1</view>
      <view class="button" @click="getButton('2')">2</view>
      <view class="button" @click="getButton('3')">3</view>
      <view class="button today" @click="getButton('清零')">清零</view>
      <view class="button" @click="getButton('4')">4</view>
      <view class="button" @click="getButton('5')">5</view>
      <view class="button" @click="getButton('6')">6</view>
      <view class="button" @click="getButton('+')">+</view>
      <view class="button" @click="getButton('7')">7</view>
      <view class="button" @click="getButton('8')">8</view>
      <view class="button" @click="getButton('9')">9</view>
      <view class="button" @click="getButton('-')">-</view>
      <view class="button" @click="getButton('0')">0</view>
      <view class="button" @click="getButton('.')">.</view>
      <view class="button complete" @click="getButton(result)">{{result}}</view>
    </view>
  </view>
</template>

<script>
import generateOutput from '@/common/generateOutput'
export default {
  props: {
    amount: Number
  },
  data() {
    return { output: this.amount.toString() }
  },
  computed: {
    result() {
      return this.output.indexOf('+') >= 0 || this.output.indexOf('-') >= 0 ? '=' : '完成'
    }
  },

  methods: {
    getButton(text) {
      if (text === null) return
      this.output = generateOutput(text, this.output)
      this.$emit('update:value', parseFloat(this.output))
      if (text === '完成') {
        this.$emit('onSubmit')
        this.output = '0'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .numberPad-wrapper {
    position: relative;
    padding: 8rpx 20rpx 0 20rpx;

    .money {
      position: absolute;
      top: -138rpx;
      right: 68rpx;
      font-weight: 800;
      font-size: 36rpx;
    }

    .section {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      margin-right: -38px;

      .button {
        background-color: #fff;
        font-weight: 600;
        font-size: 24px;
        border-radius: 10px;
        margin-right: 12px;
        text-align: center;
        width: 20%;
        height: 40px;
        line-height: 40px;
        border: 1px solid #000;
        margin-bottom: 4px;

        &.today {
          background-color: #f0aa9f;
        }

        &.complete {
          width: calc(40% + 12px);
          background-color: #eec511;
        }
      }
    }
  }
</style>
